<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- <title></title> -->
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<script src="/screen/js/jquery-3.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入 Element Plus 样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
		<link rel="stylesheet" href="/screen/css/index.css">
		  <!-- 引入 Vue 3 -->
		  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		  <!-- 引入 Element Plus -->
		  <script src="https://unpkg.com/element-plus"></script>
		<script src="/screen/js/echarts.min.js"></script>
		<script src="/screen/js/echarts-gl.min.js"></script>
		  
	</head>

	<body>
		<div class="main" id="cockpit">
			<div class="cockpitContainer" v-cloak>
				<!-- 头部 -->
				<div class="header">
					<span class="text">农村厕改指挥中心</span>
				</div>
				<!-- 返回 -->
				<!-- <div class="goback" @click="goback">返回</div> -->
				<!-- 内容开始 -->
				<div class="cockContent">
					<!-- 左边的 -->
					<div class="lectContent">
						<div class="leftItem">
							<div class="title"><span>累积订单</span></div>
							<div class="itemList">
								<div class="totalwrapper">
									<div class="totalItemm">
										<img src="/screen/assets/images/home/order1.png" alt="" class="total" />
										<div class="tottalright">
											<div class="baiNum">{{baseInfo.total_repair}}</div>
											<div class="huiT">累计报修</div>
										</div>
									</div>
									<div class="totalItemm">
										<img src="/screen/assets/images/home/order2.png" alt="" class="total" />
										<div class="tottalright">
											<div class="baiNum">{{baseInfo.total_pump}}</div>
											<div class="huiT">累计报抽</div>
										</div>
									</div>
									<div class="totalItemm">
										<img src="/screen/assets/images/home/order3.png" alt="" class="total" />
										<div class="tottalright">
											<div class="baiNum">{{baseInfo.total_repair_amount}}</div>
											<div class="huiT">累计报修金额</div>
										</div>
									</div>
									<div class="totalItemm">
										<img src="/screen/assets/images/home/order4.png" alt="" class="total" />
										<div class="tottalright">
											<div class="baiNum">{{baseInfo.total_pump_amount}}</div>
											<div class="huiT">累计报抽金额</div>
										</div>
									</div>
								</div>
							</div>
							
						</div>
						<div class="leftItem">
							<div class="title"><span>当日订单</span></div>
							<div class="itemList">
								<div class="orderWrapper">
									<div class="orderCon">
										<div class="orderItem1">
											今日报修
											<div class="num">{{baseInfo.today_repair_done}}</div>
										</div>
										<div class="orderItem3" id="orderToday"></div>
										<div class="orderItem2">
											今日报修
											<div class="num">{{baseInfo.today_pump_done}}</div>
										</div>
									</div>
								</div>
							</div>
							
						</div>
						<!-- 订单统计 -->
						<div class="leftItem">
							<div class="title"><span>订单统计</span></div>
							<div class="itemList">
							  <div class="orderTotal" id="orderTotal"></div>
							</div>
						</div>
						<!-- 事件统计 -->
						<div class="leftItem">
							<div class="title"><span>异常订单统计</span></div>
							<div class="itemList">
								<div style="display: flex;padding:2px 8px;box-sizing: border-box;">
									<div id="todayEvent" style="width: 120px;"></div>
									<!-- 事件趋势 -->
									<div id="eventTrends" style="width: 0; flex:auto;"></div>
								</div>
							</div>
						</div>
					</div>
					<!-- 中间的内容 -->
					<div class="centerContent">
						<div class="top">
							<div class="topItem" @click="openInfo('hc')">
								<img src="/screen/assets/images/home/top1.png" alt="" class="topimg">
								<div class="itemright">
									<div class="topNum">{{baseInfo.toilet_num}}</div>
									<div class="topText">户厕数量</div>
								</div>
							</div>
							<div class="topItem" @click="openInfo('sb')">
								<img src="/screen/assets/images/home/top2.png" alt="" class="topimg">
								<div class="itemright">
									<div class="topNum">{{baseInfo.device_num}}</div>
									<div class="topText">集中化粪池数量</div>
								</div>
							</div>
							<div class="topItem" @click="openInfo('ws')">
								<img src="/screen/assets/images/home/top3.png" alt="" class="topimg">
								<div class="itemright">
									<div class="topNum">{{baseInfo.sewage_num}}</div>
									<div class="topText">污水粪池处理数量</div>
								</div>
							</div>
							<div class="topItem" @click="openInfo('cl')">
								<img src="/screen/assets/images/home/top4.png" alt="" class="topimg">
								<div class="itemright">
									<div class="topNum">{{baseInfo.car_num}}</div>
									<div class="topText">车辆数量</div>
								</div>
							</div>
						</div>
						<div class="selectWrapper">
							<div class="customelect">
								<div class="select__wrapper" @click="selectItemFlag = !selectItemFlag">
									<div class="selecttext">{{searchValue}}</div>
									<i :class="[selectItemFlag?'elactive':'','el-icon el-select__caret']">
										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
											<path fill="currentColor" d="m192 384 320 384 320-384z"></path>
										</svg>
									</i>
								</div>
								<div class="customelectafter" v-show="selectItemFlag"  v-cloak></div>
								<div class="selectItemw" v-show="selectItemFlag"  v-cloak>
									<div :class="[searchValue=='全部村镇'?'select':'','item']" @click="initMap({name:'全部村镇'})">全部村镇</div>
									<div v-for="(item,index) in cityDatacode" :key="index"  
									    :class="[searchValue==item.name?'select':'','item']" @click="initMap(item)">{{item.name}}</div>
									<!-- <div :class="[searchValue=='中卫工业园区'?'select':'','item']" @click="initMap('中卫工业园区')">中卫工业园区</div>
									<div :class="[searchValue=='中卫山羊选育场'?'select':'','item']" @click="initMap('中卫山羊选育场')">中卫山羊选育场</div> -->
								</div>
							</div>
						</div>
						<!-- 提升 -->
						<div class="mapInfo" v-if="searchValue!=''&&searchValue!='全部村镇'">
							<div class="titlemap">{{searchValue}} </div>
							<div>户厕数量：{{hunum}}</div>
							<div>集中化粪池数：{{hfnum}} </div>
						</div>
						<div class="iconwrapper">
							<div class="iconItem">
								<img src="/screen/assets/images/home/icon1.png" alt="" class="img" />
								<span class="iconText">集中化粪池</span>
							</div>
							<div class="iconItem">
								<img src="/screen/assets/images/home/icon2.png" alt="" class="img" />
								<span class="iconText">排污车</span>
							</div>
							<div class="iconItem">
								<img src="/screen/assets/images/home/icon3.png" alt="" class="img" />
								<span class="iconText">维修车</span>
							</div>
							<div class="iconItem">
								<img src="/screen/assets/images/home/icon4.png" alt="" class="img" />
								<span class="iconText">污水处理站</span>
							</div>
							<div class="iconItem">
								<img src="/screen/assets/images/home/icon5.png" alt="" class="img" />
								<span class="iconText">告警</span>
							</div>
						</div>
						<div id="mapView" class="mapView"></div>
					</div>
					<!-- 右侧的 -->
					<div class="rightContent">
						<div class="rightItem">
							<div class="title"><span>告警信息</span></div>
							<div class="itemList">
								<div class="totalRightwrapper">
									<div class="tabheader">
										<div style="width: 10%;">序号</div>
										<div style="width: 30%;">化粪池</div>
										<div style="width: 40%;">告警内容</div>
										<div style="width: 20%;">时间</div>
									</div>
									<div class="scrolling-container">
										<div class="scrolling-list">
											<div class="scorllitem" v-for="(item,index) in alertData" :key="index">
												<div style="width: 10%;" class="alarmcon">{{index+1}}</div>
												<div style="width: 30%;" class="alarmcon">{{item.device_code}}</div>
												<div style="width: 40%;" class="alarmcon">{{item.content}}</div>
												<div style="width: 20%;" class="alarmcon">{{item.early_time}}</div>
												<div class="tooltipItem">
													<div style="display: flex;">
														化粪池： {{item.device_code}}
														时间： {{item.early_time}}
													</div>
													<div>
														告警内容： {{item.content}}
													</div>
												</div>
											</div>
										</div>
										<div class="scrolling-list">
											<div class="scorllitem" v-for="(item,index) in alertData" :key="index">
												<div style="width: 10%;" class="alarmcon">{{index+1}}</div>
												<div style="width: 30%;" class="alarmcon">{{item.device_code}}</div>
												<div style="width: 40%;" class="alarmcon">{{item.content}}</div>
												<div style="width: 20%;" class="alarmcon">{{item.early_time}}</div>
												<div class="tooltipItem">
													<div>
														化粪池： {{item.device_code}}
													</div>
													<div>
														告警内容： {{item.content}}
													</div>
													<div>
														时间： {{item.early_time}}
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								
							</div>
							
						</div>
						<!-- 7日交易额 -->
						<div class="rightItem">
							<div class="title"><span>7日交易额</span></div>
							<div class="itemList">
								<div class="sevenSampling" id="sevenSampling"></div>
							</div>
						</div>
						<!-- 污水7天处理量 -->
						<div class="rightItem">
							<div class="title"><span>污水7天处理量</span></div>
							<div class="itemList">
								<div class="sevenRepair" id="sevenRepair"></div>
							</div>
						</div>
						<!-- 平均维修时长 -->
						<div class="rightItem pingjun">
							<div class="title titl2e">
								<span>平均维修和报抽时长</span>
								<div>
									<span @click="pinjunchange(2)" :class='[pinjun==2?"acitve":"","pinjunitem"]'>维修时长</span>
									<span @click="pinjunchange(1)" :class='[pinjun==1?"acitve":"","pinjunitem"]'>报抽时长</span>
								</div>
								
							</div>
							<div class="itemList">
								<div class="sevenRepair" id="averageRepair" style="height:17.5vh"></div>
							</div>
							
						</div>
					</div>
				</div>
				
				<!-- 弹出框 -->
				<div class="outerWrapper" v-show="outerVisible" v-cloak>
					<div class="outeHeader">
						<span style="width: 100%; text-align: center;">
							{{ opentype == 'ws' ? '污水粪池处理数量' : opentype == 'hc' ? '户厕信息' : opentype == 'cl' ? '车辆信息' : '设备信息' }}
						</span>
						<img src="/screen/assets/images/home/del.png" alt="" class="del" @click="outerVisible = false">
					</div>
					<div class="homeTWrapper" style="height: 510px;">
						<table class="homeTHeader" border="0">
							<tbody>
								<template v-if="opentype == 'cl'">
									<tr>
										<td class="label_td">车牌号</td>
										<td class="label_td">当前位置</td>
										<td class="label_td">油位(升)</td>
										<td class="label_td">摄像头</td>
										<td class="label_td">行驶里程</td>
										<td class="label_td">停车时长</td>
										<td class="label_td">油位变化记录</td>
										<td class="label_td">行驶轨迹</td>
									</tr>
									<tr v-for="(item,index) in outerData" :key="index">
										<td>{{item.card}}</td>
										<td>{{item.pos}}</td>
										<td>{{item.yl}}</td>
										<td><span class="btntd" @click="openSanInfo('jk',item.id)">查看监控</span></td>
										<td>{{item.lc}}km</td>
										<td>{{item.pk}}h</td>
										<td><span class="btntd" @click="openSanInfo('yl',item.id)">查看油位变化</span></td>
										<td><span class="btntd" @click="openSanInfo('gj',item.id)">查看行驶轨迹</span></td>
									</tr>
									
								</template>
								<template v-if="opentype == 'hc'">
									<tr>
										<td class="label_td">ID</td>
										<td class="label_td">网格区</td>
										<td class="label_td">关联村民</td>
										<td class="label_td">户厕编号</td>
										<td class="label_td">厕所类型</td>
										<td class="label_td">容量</td>
									</tr>
									<tr v-if="outerData.length == 0">
										<td :colspan="6">暂无数据</td>
									</tr>
									<tr v-for="(item,index) in outerData" :key="index">
										<td>{{item.id}}</td>
										<td>{{item.gridding_name}}</td>
										<td>{{item.username}}</td>
										<td>{{item.number}}</td>
										<td>{{item.toilet_type}}</td>
										<td>{{item.cube}}</td>
									</tr>
								</template>
								<template v-if="opentype == 'sb'">
									<tr>
										<td class="label_td">ID</td>
										<td class="label_td">设备类型</td>
										<td class="label_td">匹配对象</td>
										<td class="label_td">创建时间</td>
										<td class="label_td">设备编号</td>
										<td class="label_td">设备状态</td>
									</tr>
									<tr v-if="outerData.length == 0">
										<td :colspan="6">暂无数据</td>
									</tr>
									<tr v-for="(item,index) in outerData" :key="index">
										<td>{{item.id}}</td>
										<td>{{item.type=='1'?'摄像头监控':item.type=='2'?'井盖检测':item.type=='3'?'多合一传感器':''}}</td>
										<td>{{item.uni_char}}</td>
										<td>{{item.create_time}}</td>
										<td>{{item.no}}</td>
										<td>{{item.status_text}}</td>
									</tr>
								</template>
								<template v-if="opentype == 'ws'">
									<tr>
										<td class="label_td">站点</td>
										<td class="label_td">氨氮传感器温度</td>
										<td class="label_td">氨氮浓度</td>
										<td class="label_td">PH值</td>
										<td class="label_td">正向累计流量</td>
										<td class="label_td">电压值(mV)</td>
										<td class="label_td">实时流量</td>
										<td class="label_td">信号强度(1~31)</td>
										<td class="label_td">实时流速</td>
										<td class="label_td">液位深度(mm)</td>
										<td class="label_td">设备</td>
									</tr>
									<tr v-for="(item,index) in outerData" :key="index">
										<td>{{item.name}}</td>
										<td>{{item.Temp}}℃</td>
										<td>{{item.NHN}}mg/L</td>
										<td>{{item.PH}}</td>
										<td>{{item.FS01A_LJ}}L/s</td>
										<td>{{item.Vol}}</td>
										<td>{{item.FS01A_LL}}L/s</td>
										<td>{{item.CSQ}}</td>
										<td>{{item.FS01A_LS}}LPM</td>
										<td>{{item.WaterDepth}}</td>
										<td><span class="btntd" @click="openSanInfo('ws',item.no)">查看污水处理数据</span></td>
									</tr>
								</template>
							</tbody>
						</table>
					</div>
					
					
				    <el-pagination
					  :page-size="pageSize"
					  :total="total"
					  :current-page="currentPage"
					  @current-change="handleCurrentChange"
					  layout="prev, pager, next"
				    >
				    </el-pagination>
				</div>
				
				<!-- 三级弹出框 -->
				<div class="outerWrapper outerWrapperSan" v-show="outerSanVisible" v-cloak>
					<div class="outeHeader">
						<span style="width: 100%; text-align: center;">
							<!-- gj -->
							{{ openSantype == 'ws' ? '污水处理终端' : openSantype == 'yl' ? '车辆油量变化' : 
							  openSantype == 'gj' ?'车辆轨迹记录' : openSantype == 'jk' ?'车辆监控' : ''}}
						</span>
						<img src="/screen/assets/images/home/del.png" alt="" class="del" @click="outerSanVisible = false">
					</div>
					<div class="homeTWrapper" style="height: 510px;">
						<table class="homeTHeader" border="0">
							<tbody>
								<template v-if="openSantype == 'ws'">
									<tr>
										<td class="label_td">设备编号</td>
										<td class="label_td">氨氮传感器温度</td>
										<td class="label_td">氨氮浓度</td>
										<td class="label_td">PH值</td>
										<td class="label_td">正向累计流量</td>
										<td class="label_td">电压值(mV)</td>
										<td class="label_td">实时流量</td>
										<td class="label_td">信号强度(1~31)</td>
										<td class="label_td">实时流速</td>
										<td class="label_td">液位深度(mm)</td>
										<td class="label_td">时间</td>
									</tr>
									<tr v-for="(item,index) in outerSanData" :key="index">
										<td>{{item.no}}</td>
										<td>{{item.Temp}}℃</td>
										<td>{{item.NHN}}mg/L</td>
										<td>{{item.PH}}</td>
										<td>{{item.FS01A_LJ}}L/s</td>
										<td>{{item.Vol}}</td>
										<td>{{item.FS01A_LL}}L/s</td>
										<td>{{item.CSQ}}</td>
										<td>{{item.FS01A_LS}}LPM</td>
										<td>{{item.WaterDepth}}</td>
										<td>{{item.create_time}}</td>
									</tr>
								</template>
								<template v-if="openSantype == 'yl'">
									<tr>
										<td class="label_td">行驶里程</td>
										<td class="label_td">油位 (升)</td>
										<td class="label_td">时间</td>
									</tr>
									<tr v-for="(item,index) in outerSanData" :key="index">
										<td>{{item.lc}}</td>
										<td>{{item.yl}}</td>
										<td>{{item.create_time}}</td>
									</tr>
								</template>
								<template v-if="openSantype == 'gj'">
									<tr>
										<td class="label_td">序号</td>
										<td class="label_td">时间</td>
										<td class="label_td">经度</td>
										<td class="label_td">维度</td>
										<td class="label_td">速度(km/h)</td>
										<td class="label_td">方向(度)</td>
										<td class="label_td">位置</td>
									</tr>
									<tr v-for="(item,index) in outerSanData" :key="index">
										<td>{{item.id}}</td>
										<td>{{item.create_time}}</td>
										<td>{{item.lng}}</td>
										<td>{{item.lat}}</td>
										<td>{{item.sp}}</td>
										<td>{{item.hx}}</td>
										<td>{{item.pos}}</td>
									</tr>
								</template>
							</tbody>
						</table>
					</div>
					<el-pagination
					  :page-size="pageSize"
					  :total="totalSan"
					  :current-page="currentSanPage"
					  @current-change="handleSanCurrentChange"
					  layout="prev, pager, next"
					>
					</el-pagination>
				</div>
			</div>
		</div>

		<script type="module">
			const { createApp, ref, onMounted, nextTick} = Vue;
			import { pieOneCharts } from "/screen/echarts/pieOneCharts.js"; //环形图
			import { lineBarChartFun } from './echarts/lineBarChart.js'
			import { lineAreaChartFun } from "./echarts/lineAreaChart.js"; //折线图区域
			import { gaugeChartFun } from "/screen/echarts/gaugeCharts.js"; //仪表
			import { lineBar2ChartFun } from "/screen/echarts/lineBarChart2.js"; //柱状和折线图 虚线
			import { pieChartFun } from "/screen/echarts/pie.js"; //柱状和折线图 虚线
			import { mapChartFun } from "/screen/echarts/map.js"; //地图
			let baseUrl = 'https://www.sptcg.cn/tybkapIOzW.php'
			createApp({
				setup() {
					const searchValue = ref('全部村镇')
					const cityDatacode = ref([])
					const selectItemFlag = ref(false);
					const outerVisible = ref(false)
					const outerSanVisible = ref(false)
					const outerData = ref([])
					const outerSanData = ref([])
					const opentype = ref('')
					const openSantype  = ref('')
					const itemvalue  = ref('')
					const currentPage = ref(1);
					const currentSanPage = ref(1);
					 
					const pageSize = ref(10);
					const total = ref(0);
					const totalSan = ref(0);
					const pinjun = ref(2)
					const hunum = ref(0)
					const hfnum = ref(0)
					const baseInfo = ref({
						total_repair:0,  //总维修数量
						total_pump:0,  //总抽污数量
						today_repair:0,  //当日维修数量
						today_pump:0,  //当日抽污数量
						today_repair_done:0,  //当日维修完成数量
						today_pump_done:0,  //当日抽污完成数量
						villager_num:0,  //村民数量
						toilet_num:0,  //厕所数量
						car_num:0,  //汽车数量
						device_num:0,  //设备数量
						satisfaction:0,  //满意度
						sewage_num:0,
						total_repair_amount:0,
						total_pump_amount:0,
					})
					let mapCharts
					// 使用 onMounted 生命周期钩子
					onMounted(() => {
						nextTick(() => {
							initOrder()
							initOrderTotal()
							init7BaoXTotal()
							init7BaoCTotal()
							initAverageRepair()
							mapCharts = echarts.init(document.getElementById('mapView'));
							initMap()
						})
						$.ajax({
							url: baseUrl + '/data_screen/overview',
							type: 'POST', //HTTP请求类型
							timeout: 15000,
							success: function(data) {
								baseInfo.value = {
									total_repair:data.total_repair,
									total_pump:data.total_pump, 
									today_repair:data.today_repair,
									today_pump:data.today_pump,
									today_repair_done:data.today_repair_done,
									today_pump_done:data.today_pump_done, 
									villager_num:data.villager_num,
									toilet_num:data.toilet_num,
									car_num:data.car_num, 
									device_num:data.device_num,
									satisfaction:data.satisfaction,
									sewage_num:data.sewage_num,
									total_repair_amount:data.total_repair_amount,
									total_pump_amount:data.total_pump_amount,
								}
								cityDatacode.value = data.villages
								nextTick(() => {
									initOrder(data.satisfaction)
									initEventTrends(data.abnormal_order_num,data.abnormal_order_chart) // 趋势
								})
							},
						})
						alertInfo()
						
					});
					
					// 告警信息
					const alertData = ref([])
					const alertInfo = () =>{
						$.ajax({
							url:  baseUrl + '/data_screen/alarmData',
							type: 'POST',
							timeout: 15000,
							success: function(data) {
								alertData.value = data.rows.data
							}
						})
					}
					
					// 当日订单
					const initOrder = (num) =>{
						let pieCharts = echarts.init(document.getElementById('orderToday'));
						let options1 = JSON.parse(JSON.stringify(pieOneCharts(num)))
						pieCharts.setOption(options1);
					}
					// 订单统计
					const initOrderTotal = () => {
						let lineBarCharts = echarts.init(document.getElementById('orderTotal'));
						$.ajax({
							url:  baseUrl + '/data_screen/orderChart',
							type: 'POST',
							timeout: 15000,
							success: function(data) {
								let seriesData = {
								    xData:data.date_value,
								    legendShow: true,
								    // unit:'个',
								    yData:[{
											name: "报抽",
											value: data.pump_value,
											type: 'bar',
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 0,
														color: '#54F0AE'
													},
													{
														offset: 1,
														color: '#15AC6C'
													}
												])
										},
										{
											name: "报修",
											value: data.repair_value,
											type: 'bar',
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 0,
														color: '#2c5eec'
													},
													{
														offset: 1,
														color: '#56aeff'
													}
												])
										},
										{
											name: "办结率",
											value: data.done_value,
											type: 'line',
											color: '#FFCB00FF'
										}]
								  }
								let options = JSON.parse(JSON.stringify(lineBarChartFun(seriesData)))
								lineBarCharts.setOption(options);
							},  
						})
					}
					// 时间趋势
					const initEventTrends = (datvalue,datares) =>{
					  let gaugeCharts = echarts.init(document.getElementById('todayEvent'));
					  gaugeCharts.setOption(gaugeChartFun({value: datvalue, title:'今日异常' }));
					  let lineAreaCharts = echarts.init(document.getElementById('eventTrends'));
					  datares.date_value = datares.date_value.map(item=>{
					  	return item.substring(5,10)
					  })
					  let data = {
					      xData:datares.date_value,
					      legendShow: false,
					      name:'异常趋势',
					      // unit:'个',
					      color:[['rgba(238, 166, 34, 0.2)','rgba(238, 166, 34, 0.6)','rgba(238, 166, 34, 1)']],
					      yData:[
					          {
					            name: "异常趋势",
					            value:datares.order_value,
					          }
					      ]
					    }
					  lineAreaCharts.setOption(JSON.parse(JSON.stringify(lineAreaChartFun(data))));
					}
					// 近七日报修
					const init7BaoXTotal = () =>{
						let lineBar2Charts = echarts.init(document.getElementById('sevenSampling'));
						$.ajax({
							url:  baseUrl + '/data_screen/orderAmountChart',
							type: 'POST',
							timeout: 15000,
							success: function(datares) {
								datares.date_value = datares.date_value.map(item=>{
									return item.substring(5,10)
								})
								let data = {
								xData:datares.date_value,
								legendShow: false,
								// unit:'个',
								yData:[
									{
									  value:datares.amount_value,
									  type:'bar',
									  name: "报修",
									  
									  color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{ offset: 0, color: '#FFC400'},
										{ offset: 1, color: '#E5944B'}
									  ])
									},
								]
							  }
							  lineBar2Charts.setOption(JSON.parse(JSON.stringify(lineBar2ChartFun(data))));
							},  
						})
					}
					// 近七日报抽
					const init7BaoCTotal = () =>{
						let lineBar2Charts = echarts.init(document.getElementById('sevenRepair'));
						$.ajax({
							url: baseUrl + '/data_screen/sewageChart',
							type: 'POST',
							timeout: 15000,
							success: function(datares) {
								datares.date_value = datares.date_value.map(item=>{
									return item.substring(5,10)
								})
								let data = {
								    xData:datares.date_value,
								    legendShow: false,
								    // unit:'个',
								    yData:[
								        {
								          value:datares.flow_value,
								          type:'bar',
										  name: "报抽",
								          color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
											{ offset: 0, color: '#00CCD2'},
											{ offset: 1, color: '#00A2FF'}
										  ])
								        }
								    ]
								  }
								lineBar2Charts.setOption(JSON.parse(JSON.stringify(lineBar2ChartFun(data))));
							},  
						})
					    
					}
					// 平均事长
					const initAverageRepair = () =>{
						let pieCharts = echarts.init(document.getElementById('averageRepair'));
						$.ajax({
							url: baseUrl + '/data_screen/repairTimePie',
							type: 'POST',
							data: {type:pinjun.value},
							timeout: 15000,
							success: function(optionsData) {
								pieCharts.setOption(pieChartFun(optionsData));
							},  
						})
					}
					// 地图
					const initMap = (Val) =>{
						if(Val){
							searchValue.value = Val.name
							selectItemFlag.value = false
						}
					    fetch('/screen/assets/area.json')
						.then(response => response.json())
						.then(areaData => {
							$.ajax({
								url: baseUrl + '/data_screen/itemPos',
								type: 'GET',
								data: {code:Val?Val.id:''},
								timeout: 15000,
								success: function(mapresdata) {
									hfnum.value = mapresdata.tank_num
									hunum.value = mapresdata.toilet_num
									let mapdata = []
									mapresdata.tanks.forEach(item=>{
										if(item.lng!='' && item.lat!=''){
											if(!item.manage_sh && item.early_id){
												mapdata.push({
													value: [Number(item.lng), Number(item.lat), 1],
													symbol:'image://./assets/images/home/icon5.png',
													name:'集中化粪池'
												})
											} else {
												mapdata.push({
													value: [Number(item.lng), Number(item.lat), 1],
													symbol:'image://./assets/images/home/icon1.png',
													name:'集中化粪池'
												})
											}
										}
									})
									mapresdata.pump_cars.forEach(item=>{
										if(item.lng!='' && item.lat!=''){
											mapdata.push({
												value: [Number(item.lng), Number(item.lat), 1],
												symbol:'image://./assets/images/home/icon2.png',
												name:'排污车'
											})
										}
									})
									mapresdata.repair_cars.forEach(item=>{
										if(item.lng!='' && item.lat!=''){
											mapdata.push({
												value: [Number(item.lng), Number(item.lat), 1],
												symbol:'image://./assets/images/home/icon3.png',
												name:'维修车'
											})
										}
									})
									mapresdata.sewage.forEach(item=>{
										if(item.lng!='' && item.lat!=''){
											if(!item.manage_sh && item.early_id){
												mapdata.push({
													value: [Number(item.lng), Number(item.lat), 1],
													symbol:'image://./assets/images/home/icon5.png',
													name:'集中化粪池'
												})
											} else {
												mapdata.push({
													value: [Number(item.lng), Number(item.lat), 1],
													symbol:'image://./assets/images/home/icon4.png',
													name:'污水站'
												})
											}
										}
									})
									let cityname = searchValue.value == '全部村镇' ? '沙坡头区' : searchValue.value
									let zommN = cityname == '沙坡头区' ? 0.58 : 0.45
									let cityData;
									if(searchValue.value == '全部村镇'){
									  cityData = areaData
									} else {
									  cityData = {
										"type": "FeatureCollection",
										"name": "沙坡头区",
										"features": areaData.features.filter((item)=>{
										  return searchValue.value == item.properties.name
										})
									  }
									}
									echarts.registerMap(cityname, cityData);
									let data1 = cityData.features.map((item) => {
									  return {
										name: item.properties.name,
									  };
									});
									// let mapdata = {
									// 	data: [{
									// 			name: '服务中心',
									// 			value: [105.241633, 37.540312, 1],
									// 			symbol:'image://./assets/images/home/icon2.png',
									// 			tooltip:'服务中心',
									// 		}
									// 	],
									// }
									let mapOption = mapChartFun(cityname,data1,zommN,{
										data:searchValue.value == '全部村镇' ? [] : mapdata
									})
									mapCharts.setOption(mapOption, true)
								},  
							})
							
						})
					}
					// 点击出现弹窗
					const openInfo = (type) =>{
					  opentype.value = type
					  currentPage.value = 1
					  initdata(type)
					  outerVisible.value = true
					}
					// 三级点击出现
					const openSanInfo = (type,value) =>{
					  openSantype.value = type
					  currentSanPage.value = 1
					  itemvalue.value = value
					  initSandata(type)
					  if(type!='jk'){
						outerSanVisible.value = true
					  }
					}
					
					const initdata = (type) =>{
						if(type == 'cm') {
							$.ajax({
								url: baseUrl + '/data_screen/villager',
								type: 'GET',
								data: {page:currentPage.value,limit:9},
								timeout: 15000,
								success: function(data) {
									outerData.value = data.rows.data
									total.value = data.rows.total
								},  
							})
						} else if(type == 'hc'){
							$.ajax({
								url: baseUrl + '/data_screen/toilet',
								type: 'GET',
								data: {page:currentPage.value,limit:9},
								timeout: 15000,
								success: function(data) {
									outerData.value = data.rows.data
									total.value = data.rows.total
								},  
							})
						} else if(type == 'sb'){
							$.ajax({
								url: baseUrl + '/data_screen/device',
								type: 'GET',
								data: {page:currentPage.value,limit:9},
								timeout: 15000,
								success: function(data) {
									outerData.value = data.rows.data
									total.value = data.rows.total
								},  
							})
						} else if(type == 'ws'){
							$.ajax({
								url: baseUrl + '/data_screen/sewage',
								type: 'POST',
								timeout: 15000,
								success: function(data) {
									outerData.value = data.rows.data
									total.value = data.rows.total
								},  
							})
						} else if(type == 'cl'){
							$.ajax({
								url: baseUrl + '/data_screen/car',
								type: 'GET',
								data: {page:currentPage.value,limit:9},
								timeout: 15000,
								success: function(data) {
									outerData.value = data.rows.data
									total.value = data.rows.total
								},  
							})
						}
					}
					
					const initSandata = (type) =>{
						if(type == 'ws') {
							$.ajax({
								url: baseUrl + '/data_screen/sewageIn',
								type: 'GET',
								data: {page:currentSanPage.value,limit:9,no:itemvalue.value},
								timeout: 15000,
								success: function(data) {
									outerSanData.value = data.rows.data
									totalSan.value = data.rows.total
								},  
							})
						} else if(type == 'yl') {
							$.ajax({
								url: baseUrl + '/data_screen/carYW',
								type: 'GET',
								data: {page:currentSanPage.value,limit:9,id:itemvalue.value},
								timeout: 15000,
								success: function(data) {
									outerSanData.value = data.rows.data
									totalSan.value = data.rows.total
								},  
							})
						} else if(type == 'gj') {
							$.ajax({
								url: baseUrl + '/data_screen/carGJ',
								type: 'GET',
								data: {page:currentSanPage.value,limit:9,id:itemvalue.value},
								timeout: 15000,
								success: function(data) {
									outerSanData.value = data.rows.data
									totalSan.value = data.rows.total
								},  
							})
						} else if(type == 'jk'){
							$.ajax({
								url: baseUrl + '/data_screen/carVideo',
								type: 'GET',
								data: {page:currentSanPage.value,limit:9,id:itemvalue.value},
								timeout: 15000,
								success: function(data) {
									var link = document.createElement("a");
								    link.href = data.video_url;
								    link.target = "_blank";
								    link.click();
								},  
							})
							
						}
					}
					const handleCurrentChange = (val) => {
					  currentPage.value = val;
					  initdata(opentype.value)
					};
					const handleSanCurrentChange = (val) => {
					  currentSanPage.value = val;
					  initSandata(openSantype.value,)
					};
					const pinjunchange = (val) =>{
						pinjun.value = val;
						initAverageRepair()
					}
					return {
						searchValue,
						selectItemFlag,
						opentype,
						openSantype,
						baseInfo,
						outerVisible,
						outerSanVisible,
						initMap,
						openInfo,
						openSanInfo,
						currentPage,
						currentSanPage,
						hfnum,
						hunum,
					    pageSize,
					    total,
						totalSan,
						pinjun,
						outerData,
						outerSanData,
						cityDatacode,
					    handleCurrentChange,
						handleSanCurrentChange,
						pinjunchange,
						alertData
					};
				}
			}).use(ElementPlus).mount('#cockpit');
		</script>
	</body>

</html>